<template>
  <div>
    <mavonEditor
      ref="md"
      v-model="currentValue"
      :toolbars="toolbars"
      :style="{'min-height': minHeight + 'px'}"
      @imgAdd="handleImgAdd"
    />
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { getToken } from '@/utils/auth'
import request from '@/utils/request'
export default {
  components: {
    mavonEditor
  },
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: ''
    },
    /* 高度 */
    height: {
      type: Number,
      default: null
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentValue: '',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      }
    }
  },
  watch: {
    currentValue: {
      handler(val) {
        this.$emit('input', val)
      },
      immediate: true
    },
    value: {
      handler(val) {
        this.currentValue = val
      },
      immediate: true
    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
          return false
        }
      }
      return true
    },
    // 将图片上传到服务器，返回地址替换到md中
    async handleImgAdd(pos, file) {
      if (this.handleBeforeUpload(file)) {
        const formData = new FormData()
        formData.append('file', file)
        const res = await request({
          url: '/common/upload',
          method: 'POST',
          data: formData,
          headers: {
            Authorization: 'Bearer ' + getToken()
          }
        })
        this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API + res.fileName)
      }
    }
  }
}
</script>

